body {
									margin: 0; padding: 1rem;
									font-family: sans-serif;
									background: #fafafa;
								}

								.galeria {
									column-count: 4;          /* Número de columnas */
									column-gap: 1rem;         /* Separación entre columnas */
								}

								/* Ajuste para pantallas pequeñas */
								@media (max-width: 1200px) {
									.galeria {
									column-count: 2;
									}
								}

								@media (max-width: 500px) {
									.galeria {
									column-count: 1;
									}
								}

								.galeria img {
									width: 100%;
									margin-bottom: 1rem;
									border-radius: 8px;
									display: block;
									/* Evitar que las imágenes se rompan entre columnas */
									break-inside: avoid;
								}

						/* Lightbox / modal (estilos) */
						#lb-modal {
							position: fixed;
							inset: 0;
							display: none;
							align-items: center;
							justify-content: center;
							background: rgba(0,0,0,0.85);
							z-index: 100000;
						}

						#lb-modal.open { display: flex; }

						.lb-inner {
							/* Leave a comfortable gap on both sides so prev/next controls remain visible */
							max-width: calc(100vw - 10rem);
							/* Leave extra vertical space for controls and mobile UI chrome */
							max-height: calc(100vh - 8rem);
							width: auto;
							height: auto;
							overflow: auto; /* permite scroll si la imagen es mayor */
							-webkit-overflow-scrolling: touch;
							display: flex;
							align-items: flex-start; /* asegurar que la imagen comience en la parte superior y se pueda scrollear */
							justify-content: center;
							padding: 1rem;
							box-sizing: border-box;
						}

						/* Hide visual scrollbars inside the modal while preserving scroll behavior */
						#lb-modal, #lb-modal .lb-inner {
							/* IE and Edge */
							-ms-overflow-style: none;
							/* Firefox */
							scrollbar-width: none;
						}

						#lb-modal .lb-inner::-webkit-scrollbar {
							width: 0px;
							height: 0px;
							background: transparent;
						}

						.lb-inner img {
							display: block;
							/* Limit opened image size so it never fills the entire viewport */
							max-width: 80vw;
							max-height: 80vh;
							/* Keep object-fit so images maintain aspect ratio */
							width: auto;
							height: auto;
							object-fit: contain; /* ajusta dentro del viewport */
							box-sizing: border-box;
						}

						/* Cuando el modal tenga la clase .actual-size, mostramos la imagen en su tamaño real y el contenedor permite scroll */
						#lb-modal.actual-size .lb-inner img {
							max-width: none;
							max-height: none;
						}

						#lb-controls {
							position: absolute;
							top: 1rem;
							right: 1rem;
							display: flex;
							gap: 0.5rem;
							align-items: center;
						}

						#lb-controls button, #lb-controls a {
							background: transparent;
							color: #ffffff; /* botones en blanco */
							border: none; /* sin borde para look minimalista */
							padding: 0.35rem 0.6rem;
							border-radius: 4px;
							cursor: pointer;
							text-decoration: none;
							font-size: 0.9rem;
							transition: background-color 0.12s ease, border-color 0.12s ease;
						}

						#lb-controls button:hover, #lb-controls a:hover {
							background: rgba(71, 65, 65, 0.02);
						}

						#lb-prev, #lb-next {
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							background: transparent; /* botones blancos sobre fondo oscuro */
							color: #ffffff;
							font-size: 1.25rem;
							width: 2.6rem;
							height: 2.6rem;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 6px;
							border: none;
							/* Make sure nav sits above the image */
							z-index: 100001;
						}

						/* Subtle translucent circular background for better visibility */
						#lb-prev, #lb-next, #lb-close {
							background: rgba(47, 46, 46, 0.45) !important;
							width: 3.2rem !important;
							height: 3.2rem !important;
							display: flex !important;
							align-items: center !important;
							justify-content: center !important;
							border-radius: 50% !important;
							box-shadow: 0 6px 18px rgba(0,0,0,0.35) !important;
							transition: background-color 0.12s ease !important;
						}

						#lb-prev:hover, #lb-next:hover, #lb-close:hover {
							background: rgba(255,255,255,0.06) !important; /* subtle lightening on hover */
						}

						/* Slightly move prev/next inward so they don't stick to the edge */
						#lb-prev { left: 1rem; }
						#lb-next { right: 1rem; }

						/* Forzar color blanco y quitar efectos por defecto (focus/hover) */
						#lb-prev, #lb-next, #lb-close, #lb-download, #lb-controls button, #lb-controls a {
							color: #ffffff !important;
							background: transparent !important;
							border: none !important;
							box-shadow: none !important;
							-webkit-appearance: none !important;
							-moz-appearance: none !important;
							appearance: none !important;
						}

						/* Eliminar outline/halo azul al enfocarlos (accessibilidad: keep keyboard focus but no visual blue) */
						#lb-prev:focus, #lb-next:focus, #lb-close:focus, #lb-download:focus, #lb-controls button:focus, #lb-controls a:focus {
							outline: none !important;
							box-shadow: none !important;
						}

						/* Mantener color blanco en hover y active */
						#lb-prev:hover, #lb-next:hover, #lb-close:hover, #lb-download:hover, #lb-controls button:hover, #lb-controls a:hover {
							color: #ffffff !important;
							background: rgba(255,255,255,0.02) !important;
						}

						#lb-prev:hover, #lb-next:hover { background: rgba(255,255,255,0.02); }

						#lb-prev { left: 0.75rem; }
						#lb-next { right: 0.75rem; }

						@media (max-width: 600px){
							#lb-controls { top: 0.5rem; right: 0.5rem; }
							#lb-prev, #lb-next { display: none; }
						}